<template>
  <el-card style="max-width: 90%; margin: 0 auto">
    <template #header>
      <div class="card-header">
        <span style="font-size: 12px">查询条件</span>
      </div>
    </template>

    <div class="flex gap-4 mb-4">
      <span>产品名称：</span>
      <el-input v-model="rolename" style="width: 40%" placeholder="" />
      <span>订单类型：</span>
      <!-- 下拉框 -->
      <el-dropdown
        ref="dropdown1"
        trigger="contextmenu"
        style="margin-right: 30px"
      >
        <el-button>
          <span
            style="font-size: 14px"
            class="el-dropdown-link"
            @click="showClick"
          >
            {{ orderid.value || "全部" }}
          </span>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="item in ordernumber"
              :key="item.number"
              @click="selectOrderid(item)"
            >
              {{ item.value }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button @click="initTableData">查询</el-button>
    </div>
  </el-card>

  <br />
  <br />
  <!-- 小图标 -->
  <div class="mb-4 button-container" style="max-width: 90%; margin: 0 auto">
    <el-button :icon="Refresh" />
    <el-button :icon="Grid" />
  </div>
  <br />
  <!-- 表格 -->
  <div style="max-width: 90%; margin: 0 auto">
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="产品" width="150" />
      <el-table-column prop="number" label="数量" width="100" />
      <el-table-column prop="price" label="单价" width="100" />
      <el-table-column prop="createdate" label="申请时间" width="200" />
      <el-table-column prop="ordertype" label="申请类型" width="100" />
      <el-table-column prop="status" label="状态" width="120" />
      <el-table-column prop="creater" label="申请人" width="120" />
      <el-table-column prop="" label="操作"
        ><template #default="{ row }">
          <el-button link type="primary" size="small" @click="confirmPass(row)"
            >通过</el-button
          >
          <span>
            <el-button
              link
              type="primary"
              size="small"
              @click="confirmReject(row)"
              >驳回</el-button
            >
          </span>
        </template></el-table-column
      >
    </el-table>
    <br />
    <!-- 分页 -->
    <div class="pagination-container">
      显示第{{ start + 1 }}到第{{ start + tableData.length }}条记录，总共{{
        Counttotal
      }}条记录
      <el-pagination
        size="small"
        layout="prev, pager, next"
        :total="Counttotal"
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <!-- 修改组件 -->
  <Edit
    v-model:editFormVisible="editFormVisible"
    :editFormData="selectedRow"
    @refreshTable="initTableData"
  />
  <!-- 通过组件 -->
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <span>确定通过吗</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        &nbsp;
        <el-button type="primary" @click="passClick">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 驳回组件 -->
  <el-dialog
    v-model="dialog"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <textarea
      style="width: 450px; height: 100px; resize: none"
      v-model="reasonText"
    ></textarea>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog = false">取消</el-button>
        &nbsp;
        <el-button type="primary" @click="rejectClick">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Plus, Right, Minus, Grid, Refresh } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { sysStore } from "../../../store/sys.js";
import { format } from "date-fns";
import http from "../../../util/http.js";
// import Edit from "./components/edit.vue";

//新增属性定义
const addFormVisible = ref(false);
//编辑属性定义
const editFormVisible = ref(false);
const selectedRow = ref(null);
//分页属性定义
const tableData = ref([]);
const Counttotal = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const start = ref(0);
// 关联属性定义
const relatedFormVisible = ref(false);
const selectedRole = ref(null);

const relatedClick = (row) => {
  selectedRole.value = row;
  relatedFormVisible.value = true;
};
//角色属性定义
const rolename = ref("");
const role = ref({
  id: "",
  name: "",
  flag: "",
});
// 获取登录角色id
const useSysStore = sysStore();
const createrid = useSysStore.id;
// account: useSysStore.account,

// 选择表单状态
const ordernumber = [
  {
    ordertype: "",
    value: "全部",
  },
  {
    ordertype: "1",
    value: "入库单",
  },
  {
    ordertype: "2",
    value: "出库单",
  },
];
// 选择的表单循环item
const orderid = ref({
  ordertype: "",
  value: "",
});

const selectOrderid = (item) => {
  orderid.value = item;
};

// 加载菜单
const initTableData = () => {
  const aggregation = {
    id: createrid,
    ordertype: orderid.value.ordertype,
  };
  const params = {
    page: currentPage.value,
    size: pageSize.value,
    name: rolename.value,
    start: start.value,
  };
  const data = {
    ...aggregation,
    ...params,
  };

  http
    .post("/aggregation/documenttable", data)
    .then((res) => {
      let result = res.data;
      console.log(result.Counttotal);
      Counttotal.value = result.Counttotal;

      start.value = (currentPage.value - 1) * pageSize.value;
      console.log(Counttotal.value + 111 + start.value);
      tableData.value = result.rows.map((row) => {
        // 拿到ordertype的全部值
        // 状态status
        let statusText;
        let flag;
        let flag1;
        switch (row.status) {
          case 1:
            statusText = "在途";
            flag = false;
            break;
          case 2:
            statusText = "驳回";
            flag = true;
            break;
          case 3:
            statusText = "结束";
            flag = true;
            flag1 = true;
            break;
          default:
            statusText = "未知";
        }
        // 单据类型
        let ordertypeText;
        switch (row.ordertype) {
          case 1:
            ordertypeText = "入库单";
            break;
          case 2:
            ordertypeText = "出库单";
            break;
          default:
            statusText = "未知";
        }
        return {
          id: row.id,
          typeid: row.typeid,
          name: row.material.name,
          number: row.number,
          price: row.price,
          createdate: format(new Date(row.createdate), "yyyy-MM-dd HH:mm:ss"),
          ordertype: ordertypeText,
          status: statusText,
          creater: row.creater,
          flag: flag,
          flag1: flag1,
        };
      });
    })
    .catch((error) => {
      ElMessage.error("加载数据失败：" + error);
    });
};
// 获取状态

// 分页功能
const handleSizeChange = (size) => {
  pageSize.value = size;
  initTableData();
};

const handleCurrentChange = (page) => {
  currentPage.value = page;
  initTableData();
};

//通过功能
const dialogVisible = ref(false);
const passRow = ref();
const confirmPass = (row) => {
  passRow.value = row;
  dialogVisible.value = true;
};

// 通过入库单
const passClick = () => {
  let ordertype;
  switch (passRow.value.ordertype) {
    case "入库单":
      ordertype = 1;
      break;
    case "出库单":
      ordertype = 2;
      break;
    default:
      statusText = "未知";
  }
  console.log(ordertype);
  if (passRow.value.ordertype == "入库单") {
    // 入库单
    const aggregation = {
      id: passRow.value.id,
      name: passRow.value.name,
      number: passRow.value.number,
      typeid: passRow.value.typeid,
      ordertype: ordertype,
      status: "3",
    };
    console.log(aggregation);
    const passdata = {
      typeid: passRow.value.typeid,
    };
    const data = {
      ...aggregation,
      ...passdata,
    };
    http.post("/aggregation/passproduct", data).then((res) => {
      if (res.code === 200) {
        ElMessage.success("已通过");
        initTableData();
        dialogVisible.value = false;
      } else {
        ElMessage.error("通过失败");
      }
    });
  }
  if (passRow.value.ordertype == "出库单") {
    console.log(passRow.value.ordertype + 2222);
    // 出库单
    const aggregation = {
      id: rejectRow.value.id,
      name: rejectRow.value.name,
      number: rejectRow.value.number,
      typeid: rejectRow.value.typeid,
      ordertype: ordertype,
      reason: reasonText.value,
      status: "3",
    };
    console.log(aggregation);
    const rejectdata = {
      typeid: rejectRow.value.typeid,
    };
    const data = {
      ...aggregation,
      ...rejectdata,
    };
    http.post("/aggregation/rejectproduct", data).then((res) => {
      if (res.code === 200) {
        ElMessage.success("已通过");
        initTableData();
        dialog.value = false;
      } else {
        ElMessage.error("通过失败");
      }
    });
  }
};
//驳回功能
const dialog = ref(false);
const rejectRow = ref({
  id: "",
  name: "",
  number: "",
  typeid: "",
});
const confirmReject = (row) => {
  rejectRow.value = row;
  dialog.value = true;
};
// 驳回原因
const reasonText = ref();
// 驳回出库单
const rejectClick = () => {
  const aggregation = {
    id: rejectRow.value.id,
    name: rejectRow.value.name,
    number: rejectRow.value.number,
    typeid: rejectRow.value.typeid,
    reason: reasonText.value,
    status: "2",
  };
  console.log(aggregation);
  const passdata = {
    typeid: rejectRow.value.typeid,
  };
  const data = {
    ...aggregation,
    ...passdata,
  };
  console.log(passdata);
  http.post("/aggregation/rejectreasonproduct", data).then((res) => {
    if (res.code === 200) {
      ElMessage.success("已通过");
      initTableData();
      dialog.value = false;
    } else {
      ElMessage.error("通过失败");
    }
  });
};
onMounted(() => {
  initTableData();
});
const dropdown1 = ref();
function showClick() {
  if (!dropdown1.value) return;
  dropdown1.value.handleOpen();
}
</script>

<style scoped>
:deep .el-form-item__content {
  flex-wrap: nowrap;
}
.el-input {
  margin-right: 10px;
}
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:deep .el-button + .el-button {
  margin-left: 0px;
}
.button-container {
  display: flex;
  justify-content: flex-end;
}
</style>
